<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var Checkbox = {	
	toggle : true,

	options : [ { name : 'Bob', selected : false },
	        	{ name : 'Alisa', selected : false },
	        	{ name : 'John', selected : false }, ],

	test : function() {}
};
</script>
<div id="Checkbox" >
<script type="text/html">
<div>
	<div>Simple, static checkbox:
  	<input type="checkbox" checked="#{.Checkbox.toggle}" onchange="#{.Checkbox.test()}"></input>
	<span>#{.Checkbox.toggle}</span><br />

	
	</div>
	<br />
	<div>Many checkboxes:<br />
	<loop value="#{.Checkbox.options}" var="option">
		<div>
  		<input type="checkbox" checked="#{.option.selected}" onchange="#{.Checkbox.test()}"></input>
		<span style="padding-right: 10px">#{.option.name} </span>
		<span rendered="#{.option.selected}"> is selected.</span>
		<span rendered="#{!.option.selected}"> is NOT selected.</span>
		<br />
		</div>
	</loop>
	</div>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Checkbox'); 
	// bind model
	gnatooContext.data['Checkbox'] = Checkbox;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


